﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Tag="Layout - Grid Strategy with Line elements">
    <Grid Width="320">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>

            <ColumnDefinition/>
            <!-- extra column for grid line -->
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>

            <RowDefinition/>
            <!-- extra row for grid line -->
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style TargetType="Grid">
                <Setter Property="Margin" Value="4" />
            </Style>
            <Style TargetType="TextBlock">
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="VerticalAlignment" Value="Center" />
            </Style>
            <Style TargetType="Line" x:Key="BaseLineStyle">
                <Setter Property="StrokeEndLineCap" Value="Square" />
                <!-- StrokeEndLineCap does little to help the joining of lines at the corners of the grid. -->
                <Setter Property="Stroke" Value="Black" />
                <Setter Property="Stretch" Value="Fill" />
                <!-- This Stretch setting makes the grid effect. -->
                <!--
                In more complex designs you may need ZIndex force:
                <Setter Property="Grid.ZIndex" Value="1" />
            -->
            </Style>
            <Style x:Key="GridLineStyleHorizontal"
            TargetType="Line"
            BasedOn="{StaticResource BaseLineStyle}">
                <Setter Property="X2" Value="2" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="Grid.ColumnSpan" Value="4"/>
                <!--
                ColumnSpan is hard-coded here; as a generic alternative use:
                {Binding Path=ColumnDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}
            -->
            </Style>
            <Style x:Key="GridLineStyleVertical"
            TargetType="Line"
            BasedOn="{StaticResource BaseLineStyle}">
                <Setter Property="Y2" Value="2" />
                <Setter Property="StrokeThickness" Value="2" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="Grid.RowSpan" Value="13"/>
                <!--
                RowSpan is hard-coded here; as a generic alternative use:
                {Binding Path=RowDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}
            -->
            </Style>
        </Grid.Resources>

        <!-- Grid Lines -->
        <Line Grid.Column="0" Style="{StaticResource GridLineStyleVertical}" />
        <Line Grid.Column="1" Style="{StaticResource GridLineStyleVertical}" />
        <Line Grid.Column="2" Style="{StaticResource GridLineStyleVertical}" />
        <Line Grid.Column="3" Style="{StaticResource GridLineStyleVertical}" />
        <Line Grid.Column="4" Style="{StaticResource GridLineStyleVertical}" />

        <Line Grid.Row="0" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="1" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="2" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="3" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="4" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="5" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="6" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="7" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="8" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="9" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="10" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="11" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="12" Style="{StaticResource GridLineStyleHorizontal}" />
        <Line Grid.Row="13" Style="{StaticResource GridLineStyleHorizontal}" />

        <!-- Row 0 -->
        <TextBlock Grid.Column="0" Grid.Row="0">Char</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="0">Dec</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="0">Oct</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="0">Hex</TextBlock>

        <!-- Row 1 -->
        <TextBlock Grid.Column="0" Grid.Row="1">(nul)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="1">0</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="1">0000</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="1">0x00</TextBlock>

        <!-- Row 2 -->
        <TextBlock Grid.Column="0" Grid.Row="2">(soh)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="2">0</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="2">0000</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="2">0x00</TextBlock>

        <!-- Row 3 -->
        <TextBlock Grid.Column="0" Grid.Row="3">(stx)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="3">2</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="3">0002</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="3">0x02</TextBlock>

        <!-- Row 4 -->
        <TextBlock Grid.Column="0" Grid.Row="4">(etx)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="4">3</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="4">0003</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="4">0x03</TextBlock>

        <!-- Row 5 -->
        <TextBlock Grid.Column="0" Grid.Row="5">(eot)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="5">4</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="5">0004</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="5">0x04</TextBlock>

        <!-- Row 6 -->
        <TextBlock Grid.Column="0" Grid.Row="6">(enq)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="6">5</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="6">0005</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="6">0x05</TextBlock>

        <!-- Row 7 -->
        <TextBlock Grid.Column="0" Grid.Row="7">(ack)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="7">6</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="7">0006</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="7">0x06</TextBlock>

        <!-- Row 8 -->
        <TextBlock Grid.Column="0" Grid.Row="8">(bel)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="8">7</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="8">0007</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="8">0x07</TextBlock>

        <!-- Row 9 -->
        <TextBlock Grid.Column="0" Grid.Row="9">(bs)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="9">8</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="9">0010</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="9">0x08</TextBlock>

        <!-- Row 10 -->
        <TextBlock Grid.Column="0" Grid.Row="10">(ht)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="10">9</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="10">0011</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="10">0x09</TextBlock>

        <!-- Row 11 -->
        <TextBlock Grid.Column="0" Grid.Row="11">(nl)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="11">10</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="11">0012</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="11">0x0a</TextBlock>

        <!-- Row 12 -->
        <TextBlock Grid.Column="0" Grid.Row="12">(vt)</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="12">11</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="12">0013</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="12">0x0b</TextBlock>

        <!--
        data source: http://web.cs.mun.ca/~michael/c/ascii-table.html
    -->

    </Grid>
</UserControl>
